﻿<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
	<jsp:include page="frame.jsp"></jsp:include>
	<div id="page-wrapper">
		<div class="header">
			<h1 class="page-header">
				主页
			</h1>
			<ol class="breadcrumb">
				<li><a href="#">主页</a></li>
				<li class="active">统计数据一览</li>
			</ol>

		</div>
		<div id="page-inner">

			<div class="dashboard-cards">
				<div class="row">
					<div class="col-xs-12 col-sm-6 col-md-3">
						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image green">
								<i class="fa fa-clock-o"></i>
							</div>
							<div class="card-stacked green">
								<div class="card-content">
									<h3 id="time"></h3>
								</div>
								<script>
                                    $(function () {
                                        setInterval(getTime, 1000);
                                    });

                                    function getTime() {
                                        var dateTime = new Date();
                                        var hours = dateTime.getHours();
                                        var minutes = dateTime.getMinutes();
                                        var seconds = dateTime.getSeconds();
                                        if (hours < 10) {
                                            hours = "0" + hours;
                                        }
                                        if (minutes < 10){
                                            minutes = "0" + minutes;
                                        }
                                        if (seconds < 10){
                                            seconds = "0" + seconds;
                                        }
                                        $("#time").text(hours + ":" + minutes + ":" + seconds);
                                    }
								</script>
								<div class="card-action">
									<strong>当前时间</strong>
								</div>
							</div>
						</div>

					</div>

					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image red">
								<i class="fa fa-support"></i>
							</div>
							<div class="card-stacked red">
								<div class="card-content">
									<h3>${countOfPrize}</h3>
								</div>
								<div class="card-action">
									<strong>奖项数</strong>
								</div>
							</div>
						</div>

					</div>
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image orange">
								<i class="fa fa-id-card"></i>
							</div>
							<div class="card-stacked orange">
								<div class="card-content">
									<h3>${countOfTeacher}</h3>
								</div>
								<div class="card-action">
									<strong>教师数</strong>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-3">

						<div class="card horizontal cardIcon waves-effect waves-dark">
							<div class="card-image blue">
								<i class="fa fa-user-o"></i>
							</div>
							<div class="card-stacked blue">
								<div class="card-content">
									<h3>${countOfStudent}</h3>
								</div>
								<div class="card-action">
									<strong>学生数</strong>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
			<!-- /. ROW  -->
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-7">
					<div class="cirStats">
						<div class="row">
							<div class="col-xs-12 col-sm-6 col-md-6">
								<div class="card-panel text-center">
									<h4>特等奖率</h4>
									<div class="easypiechart" id="easypiechart-blue" data-percent="<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfSpecialPrize / countOfPrize * 100}"></fmt:formatNumber>" >
										<span class="percent">
											<c:choose>
												<c:when test="${countOfPrize == 0}">
													0
												</c:when>
												<c:otherwise>
													<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfSpecialPrize / countOfPrize * 100}"></fmt:formatNumber>
												</c:otherwise>
											</c:choose>
											%
										</span>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-6">
								<div class="card-panel text-center">
									<h4>一等奖率</h4>
									<div class="easypiechart" id="easypiechart-red" data-percent="<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfFirstPrize / countOfPrize * 100}"></fmt:formatNumber>" >
										<span class="percent">
											<c:choose>
												<c:when test="${countOfPrize == 0}">
													0
												</c:when>
												<c:otherwise>
													<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfFirstPrize / countOfPrize * 100}"></fmt:formatNumber>
												</c:otherwise>
											</c:choose>
											%
										</span>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-6">
								<div class="card-panel text-center">
									<h4>二等奖率</h4>
									<div class="easypiechart" id="easypiechart-teal" data-percent="<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfSecondPrize / countOfPrize * 100}"></fmt:formatNumber>" >
										<span class="percent">
											<c:choose>
												<c:when test="${countOfPrize == 0}">
													0
												</c:when>
												<c:otherwise>
													<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfSecondPrize / countOfPrize * 100}"></fmt:formatNumber>
												</c:otherwise>
											</c:choose>
											%
										</span>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-6">
								<div class="card-panel text-center">
									<h4>三等奖率</h4>
									<div class="easypiechart" id="easypiechart-orange" data-percent="<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfThirdPrize / countOfPrize * 100}"></fmt:formatNumber>" >
										<span class="percent">
											<c:choose>
												<c:when test="${countOfPrize == 0}">
													0
												</c:when>
												<c:otherwise>
													<fmt:formatNumber type="number" pattern="0.00" maxFractionDigits="2" value="${countOfThirdPrize / countOfPrize * 100}"></fmt:formatNumber>
												</c:otherwise>
											</c:choose>
											%
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div><!--/.row-->
				<div class="col-xs-12 col-sm-12 col-md-5">
					<div class="row">
						<div class="col-xs-12">
							<div class="card">
								<div class="card-image donutpad">
									<div id="morris-donut-chart"></div>
								</div>
								<div class="card-action">
									<b>国家级/省级/市级/校级</b>
								</div>
							</div>
						</div>
					</div>
				</div><!--/.row-->
			</div>
			<!-- /. ROW  -->
		</div>
		<!-- /. PAGE INNER  -->
	</div>
	<!-- /. PAGE WRAPPER  -->
</div>
	<!-- /. WRAPPER  -->
</body>
<script type="text/javascript">

    $(document).ready(function () {

        Morris.Donut({
            element: 'morris-donut-chart',
            data: [{
                label: "国家级",
                value: ${countOfContryLevel}
            }, {
                label: "省级",
                value: ${countOfProvinceLevel}
            }, {
                label: "市级",
                value: ${countOfCityLevel}
            }, {
                label: "校级",
                value: ${countOfSchoolLevel}
            }],
            colors: [
                '#A6A6A6',
                '#414e63',
                '#e96562',
                '#45aa47'
            ],
            resize: true
        });


        $('.bar-chart').cssCharts({type:"bar"});
        $('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
        $('.line-chart').cssCharts({type:"line"});

        $('.pie-thychart').cssCharts({type:"pie"});

	});

</script>

</html>